<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Tab | Material</title>

    <link rel="stylesheet" href="../../assets/css/main/bootstrap.min.css">

    <link rel="stylesheet" href="../../assets/css/main/material-design-icons.min.css">

    <link rel="stylesheet" href="../../assets/css/main/material.min.css">

    <link rel="stylesheet" href="../../assets/css/main/ripples.min.css">

    <link rel="stylesheet" href="../../assets/css/main/owl.carousel.min.css">

    <link rel="stylesheet" href="../../assets/css/main/magnific-popup.css">

    <link rel="stylesheet" href="assets/css/animate1.css">

    <link rel="stylesheet" href="../../assets/css/main/style.css">

    <link rel="stylesheet" href="../../assets/css/main/responsive.css">

    <link rel="stylesheet" type="text/css" href="../../assets/css/colors/indigo.css" media="screen"/>
</head>
<body>

<header id="header">
    <div class="navbar-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <nav class="navbar navbar-expand-lg">
                        <a class="navbar-brand" href="../../index.html">
                            <img src="../../assets/images/logo.png" alt="Logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                aria-expanded="false" aria-label="Toggle navigation">
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                            <span class="toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
                            <ul id="nav" class="navbar-nav ml-auto">
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Home <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="../../index.html">Home V1</a></li>
                                        <li class="nav-item"><a href="index-2.html">Home V2</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Pages <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="about-us.html">About Us 1</a></li>
                                        <li class="nav-item"><a href="about-us2.html">About Us 2</a></li>
                                        <li class="nav-item"><a href="team.html">Team Members</a></li>
                                        <li class="nav-item"><a href="features.html">Features</a></li>
                                        <li class="nav-item"><a href="team-single.html">Team Single Page</a></li>
                                        <li class="nav-item"><a href="services.html">Services</a></li>
                                        <li class="nav-item"><a href="404.html">404</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item active">
                                    <a class="page-scroll" href="#">Components <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a class="active" href="tab.html">Tabs</a></li>
                                        <li class="nav-item"><a href="alert.html">Alert</a></li>
                                        <li class="nav-item"><a href="accordion.html">Accordions</a></li>
                                        <li class="nav-item"><a href="pricing.html">Pricing Tables</a></li>
                                        <li class="nav-item"><a href="buttons.html">Buttons</a></li>
                                        <li class="nav-item"><a href="icons.html">Icons</a></li>
                                        <li class="nav-item"><a href="carousel.html">Carousel</a></li>
                                        <li class="nav-item"><a href="counter.html">Counter</a></li>
                                        <li class="nav-item"><a href="map.html">Google Map</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Portfolio <span><i class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="portfolio-2.html">Portfolio 2 columns</a></li>
                                        <li class="nav-item"><a href="portfolio.html">Portfolio 3 columns</a></li>
                                        <li class="nav-item"><a href="portfolio-single.html">Portfolio Single</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Blog <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu">
                                        <li class="nav-item"><a href="blog.html">Blog Page</a></li>
                                        <li class="nav-item"><a href="blog-single.html">Blog Single Page</a></li>
                                    </ul>
                                </li>
                                <li class="nav-item">
                                    <a class="page-scroll" href="#">Contact <span><i
                                            class="mdi mdi-chevron-down"></i></span></a>
                                    <ul class="sub-menu left-menu">
                                        <li class="nav-item"><a href="contact-us.html">Contact Us 1</a></li>
                                        <li class="nav-item"><a href="contact-us2.html">Contact Us 2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>

                        <div class="search-icon">
<span class="open-search">
<i class="mdi mdi-magnify btn btn-common"></i>
</span>
                        </div>
                        <form role="search" class="navbar-form">
                            <div class="container">
                                <div class="row">
                                    <div class="form-group has-feedback">
                                        <input type="text" placeholder="Type and search ..." class="form-control">
                                        <div class="close"><i class="mdi mdi-close"></i></div>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </nav>
                </div>
            </div>
        </div>
    </div>
</header>


<section class="page-title-section section-padding">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="title-center">
                    <div class="title-middle">
                        <h2 class="page-tagline">Temaplate Shortcode</h2>
                        <h1 class="page-title">Tabs</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="material-tabs-section section-padding">
    <div class="container">
        <div class="row">

            <div class="col-md-12 material-title-section wow animated fadeInLeft" data-wow-delay=".2s">
                <h1 class="section-title">Vision 1</h1>
            </div>
        </div>
        <div class="row mt-2 wow animated fadeInUp" data-wow-delay=".4s">
            <div class="col-md-12">
                <div class="Material-tab-default">

                    <ul class="nav nav-tabs text-center" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Design</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Development</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#messages" role="tab">Marketing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#settings" role="tab">UI & UX</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="home" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work1.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">Perferendis et, veritatis enim voluptatem libero.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at. Expedita impedit facere magnam commodi sed
                                        dolorem adipisci.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam
                                        quam inventore
                                        suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab
                                        porro cupiditate
                                        optio mollitia, expedita, omnis? Quasi.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work2.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">Delectus, aut ut totam quam inventore suscipit.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at. Expedita impedit facere magnam commodi sed
                                        dolorem adipisci.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam
                                        quam inventore
                                        suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab
                                        porro cupiditate
                                        optio mollitia, expedita, omnis? Quasi.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="messages" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work3.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">voluptatum itaque at. Expedita impedit facere.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at. Expedita impedit facere magnam commodi sed
                                        dolorem adipisci.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam
                                        quam inventore
                                        suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab
                                        porro cupiditate
                                        optio mollitia, expedita, omnis? Quasi.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="settings" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work4.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">Lorem ipsum dolor sit amet, consectetur adi.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at. Expedita impedit facere magnam commodi sed
                                        dolorem adipisci.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam
                                        quam inventore
                                        suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab
                                        porro cupiditate
                                        optio mollitia, expedita, omnis? Quasi.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section-padding">
    <div class="container">
        <div class="row">

            <div class="col-md-12 Material-title-section wow animated fadeInLeft" data-wow-delay=".2s">
                <h1 class="section-title">Vision 2</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="Material-tab">

                    <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#business" role="tab"><i
                                    class="mdi mdi-account-multiple-outline"></i></br>Business</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#startup" role="tab"><i
                                    class="mdi mdi-flash-outline"></i></br>Startup</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#agency" role="tab"><i
                                    class="mdi mdi-all-inclusive"></i></br>Agency</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#saas" role="tab"><i
                                    class="mdi mdi-cloud-outline"></i></br>SaaS</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="business" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit.
                                Exercitationem modi maxime non nam sed voluptatum accusamus, minus, perspiciatis esse
                                eveniet itaque
                                voluptates quas dignissimos, voluptas quasi dolor. Quam, nesciunt, sapiente.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi. Lorem ipsum dolor sit amet, consectetur adipisicing
                                elit.
                                Consequuntur soluta, incidunt, facere, praesentium nisi blanditiis in magni quis quasi
                                fugiat possimus
                                quod quos illum maiores minus at assumenda sed numquam.</p>
                        </div>
                        <div class="tab-pane fade" id="startup" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit. Quam
                                a iste cupiditate dolorum quas eaque laudantium libero, magnam sint unde non ab,
                                quisquam amet
                                excepturi repellat. Praesentium rem, incidunt nemo.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi. Lorem ipsum dolor sit amet, consectetur adipisicing
                                elit. In
                                consequatur provident dolorum temporibus, aperiam eaque excepturi perspiciatis amet
                                commodi! Iste
                                dolore sit ipsa autem unde molestias fugit inventore ex illo?</p>
                        </div>
                        <div class="tab-pane fade" id="agency" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit.
                                Velit laudantium officia voluptates maiores iste laborum aspernatur praesentium tenetur,
                                debitis vero
                                aliquid asperiores eum, nesciunt nam at quasi ducimus suscipit esse!</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi. Lorem ipsum dolor sit amet, consectetur adipisicing
                                elit.
                                Perspiciatis placeat deleniti commodi sequi maxime sint saepe autem, nisi blanditiis
                                optio itaque
                                magnam possimus eius assumenda a facere officia, cupiditate quia.</p>
                        </div>
                        <div class="tab-pane fade" id="saas" role="tabpanel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                quibusdam, officia
                                sed mollitia, illo, quis, vel veniam officiis qui repellendus. Perferendis et, veritatis
                                enim
                                voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque tempora id Lorem
                                ipsum dolor
                                sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur
                                adipisicing elit.
                                Dolorum aut, dignissimos. Officiis veniam incidunt, soluta dicta! Atque esse corporis
                                enim, adipisci
                                alias quidem repellat nesciunt ipsa voluptates deserunt, totam vitae.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, aut ut totam quam
                                inventore
                                suscipit ullam nostrum quisquam corrupti nesciunt voluptas necessitatibus, ab porro
                                cupiditate optio
                                mollitia, expedita, omnis? Quasi. Lorem ipsum dolor sit amet, consectetur adipisicing
                                elit. Nesciunt
                                aspernatur libero harum sint necessitatibus aliquid, nulla, mollitia expedita maiores
                                dolorem nisi
                                eaque ullam minima cupiditate provident ipsum quis dolor voluptatum?</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="Material-tabs-section section-padding">
    <div class="container">
        <div class="row">

            <div class="col-md-12 Material-title-section wow animated fadeInLeft" data-wow-delay=".2s">
                <h1 class="section-title">Vision 3</h1>
            </div>
        </div>
        <div class="Material-tab-default tabs-style-2">
            <div class="row">
                <div class="col-lg-3 col-xs-12">
                    <div class="nav flex-column nav-pills nav-vertical" id="v-pills-tab" role="tablist"
                         aria-orientation="vertical">
                        <a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#home3" role="tab"
                           aria-controls="v-pills-home" aria-selected="false">Home</a>
                        <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#profile3" role="tab"
                           aria-controls="v-pills-profile" aria-selected="false">Profile</a>
                        <a class="nav-link active show" id="v-pills-messages-tab" data-toggle="pill" href="#messages3"
                           role="tab" aria-controls="v-pills-messages" aria-selected="true">Messages</a>
                        <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#settings3" role="tab"
                           aria-controls="v-pills-settings" aria-selected="false">Settings</a>
                    </div>
                </div>
                <div class="col-lg-9 col-xs-12">

                    <div class="tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade show active" id="home3" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work1.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">Perferendis et, veritatis enim voluptatem libero.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at. Expedita impedit facere magnam commodi sed
                                        dolorem adipisci.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="profile3" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work2.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">Delectus, aut ut totam quam inventore suscipit.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at. Expedita impedit facere magnam commodi sed
                                        dolorem adipisci.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="messages3" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work3.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">voluptatum itaque at. Expedita impedit facere.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at. Expedita impedit facere magnam commodi sed
                                        dolorem adipisci.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="settings3" role="tabpanel">
                            <div class="row">
                                <div class="col-md-4">
                                    <img src="../../assets/images/portfolio/work4.jpg" alt="">
                                </div>
                                <div class="col-md-8">
                                    <h2 class="subtitle">Lorem ipsum dolor sit amet, consectetur adi.</h2>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam nesciunt dolores
                                        quibusdam,
                                        officia sed mollitia, illo, quis, vel veniam officiis qui repellendus.
                                        Perferendis et, veritatis
                                        enim voluptatem libero consequuntur eveniet alias nesciunt fugit doloremque
                                        tempora id, impedit
                                        sed earum voluptatum itaque at.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<footer class="page-footer center-on-small-only  pt-0 footer-widget-container">

    <div class="container pt-5 mb-5">
        <div class="row">

            <div class="col-md-6 col-lg-3 col-xl-3 footer-contact-widget">
                <h3 class="footer-title">About Us</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates eos minus expedita illo
                    recusandae
                    esse labore obcaecati nisi amet quia odio sapiente! Fugiat, voluptatibus nemo necessitatibus
                    porro.</p>
                <ul>
                    <li>
                        <a href="#"><i class="mdi mdi-facebook"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-twitter"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-instagram"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-github"></i></a>
                    </li>
                    <li>
                        <a href="#"><i class="mdi mdi-linkedin"></i></a>
                    </li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 recent-widget">
                <h3 class="footer-title">Recent Posts</h3>
                <ul class="image-list">
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a1.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Fusce gravida tortor felis</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a2.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Ornare Nullam Risus Cursus</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                    <li>
                        <figure class="overlay">
                            <img class="img-fluid" src="assets/images/art/a3.jpg" alt="">
                            <figcaption><a href="blog-single.html"><i class="mdi mdi-link-variant from-top icon-xs"></i></a>
                            </figcaption>
                        </figure>
                        <div class="post-content">
                            <h6 class="post-title"><a href="blog-single.html">Euismod Nullam Fusce Dapibus</a></h6>
                            <div class="meta"><span class="date">12 Jan 2019</span></div>
                        </div>
                    </li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 link-widget">
                <h3 class="footer-title">Get in Touch</h3>
                <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem
                    malesuada
                    magna mollis euismod. Praesent commodo cursus.</p>
                <div class="mt-3"></div>
                <ul class="icon-list">
                    <li><i class="mdi mdi-map-marker"></i> 548 San Francisco, CA</li>
                    <li><i class="mdi mdi-email"></i> <a
                            href="/cdn-cgi/l/email-protection#620f030b0e220f031607100b030e4c010d0f"
                            class="nocolor"><span class="__cf_email__"
                                                  data-cfemail="87eae6eeebc7eae6f3e2f5eee6eba9e4e8ea">[email&#160;protected]</span></a>
                    </li>
                    <li><i class="mdi mdi-phone-classic"></i> +00 (123) 456 78 90</li>
                    <li><i class="mdi mdi-cellphone-iphone"></i> +00 (121) 455 47 54</li>
                </ul>
            </div>


            <div class="col-md-6 col-lg-3 col-xl-3 footer-contact">
                <h3 class="footer-title">Subscribe</h3>
                <div class="widget">
                    <div class="newsletter-wrapper">
                        <form method="post" id="subscribe-form" name="subscribe-form" class="validate">
                            <div class="form-group">
                                <input type="email" value="" name="EMAIL" class="email form-control" id="EMAIL"
                                       placeholder="Email Address" required="">
                                <button type="submit" name="subscribe" id="subscribe" class="btn btn-common pull-right">
                                    Join
                                </button>
                                <div class="clearfix"></div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="widget">
                    <h5 class="widget-title">Useful Links</h5>
                    <ul class="unordered-list">
                        <li><a href="#" class="nocolor">Terms of Use</a></li>
                        <li><a href="#" class="nocolor">Privacy Policy</a></li>
                        <li><a href="#" class="nocolor">Company Profile</a></li>
                        <li><a href="#" class="nocolor">Why Choose Us</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>


    <div class="footer-copyright">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <p>By <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></p>
                </div>
            </div>
        </div>
    </div>

</footer>


<a href="#" class="back-to-top">
    <div class="ripple-container"></div>
    <i class="mdi mdi-arrow-up">
    </i>
</a>

<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>


<script data-cfasync="false" src="../../assets/js/email-decode.min.js"></script>
<script src="../../assets/js/modernizr-3.7.1.min.js"></script>
<script src="assets/js/vendor/jquery-3.5.1-min.js"></script>
<script src="../../assets/js/popper.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/jquery.mixitup.min.js"></script>
<script src="../../assets/js/jquery.inview.js"></script>
<script src="../../assets/js/jquery.counterup.min.js"></script>
<script src="../../assets/js/material.min.js"></script>
<script src="../../assets/js/ripples.min.js"></script>
<script src="../../assets/js/owl.carousel.min.js"></script>
<script src="../../assets/js/form-validator.min.js"></script>
<script src="../../assets/js/contact-form-script.min.js"></script>
<script src="../../assets/js/wow.js"></script>
<script src="../../assets/js/jquery.magnific-popup.min.js"></script>
<script src="../../assets/js/main.js"></script>
</body>
</html>